(function($){
$.Class('hg.RotationBanner', {
	init: function(opt){
		this._opt = $.extend({ }, opt);
		this._getElements();
		this._monitor();
		this._setInit();
	},
	/** 
	 * Get elements we need
	 */
	_getElements: function(){
		this.content = $('#contentArea');
		this.screen = $('#js_gameLiBnrArea');
		this.imgQueue = $('li', this.screen);
		this.navigation = $('#contentArea ul.navList li');
		this.imgThumb = $('#contentArea ul.navList li a img');
		
		this.current = 0;
		this.lock = true;
		
		this.isAuto = true;
		
		this.duration = 1000;
		this.delay = 5000;
		
		this.level = 10;
		this.vertical = 7;
		$.extend(this, this._opt);
		this.length = this.navigation.length;
		
		if(!this.imgwidth){
			this.imgwidth = $(this.screen).width();
		}
		if(!this.imgheight){
			this.imgheight = $(this.screen).height();
		}
		
	},
	
	_monitor: function(){
		var queue = this.imgQueue,
			that = this;
		$.each(this.navigation, function(index, value){
			value.js_helpid = index;
			$(value).bind('click', function(e){
				if(this.js_helpid != that.current && that.lock){
					that._move(this.js_helpid);
				}
				e.preventDefault();
			});
		});
		
		this.content.bind('mouseover', function(e){
			that._overHandler();
		});
		
		this.content.bind('mouseout', function(e){
			that._outHandler();
		});
	},
	
	_setInit: function(){
		if(this.delay == 0 || this.delay < this.duration){
			this.isAuto = false;
		}
		if(this.isAuto){
			this._autoRun();
		}
		
		this.screen.append($('<div id="js_grid"></div>'));
		this.grid = $('#js_grid');
		this.grid.css('width', this.imgwidth)
				 .css('height', this.imgheight)
				 .css('position', 'absolute')
				 .css('top', 0)
				 .css('left', 0)
				 .css('zIndex', 999);
		
		this._formGrid();
	},
	
	_formGrid: function(){
		var width = parseInt(this.imgwidth / this.level),
			height = parseInt(this.imgheight / this.vertical),
			spwidth = this.imgwidth - (this.level - 1) * width,
			spheight = this.imgheight - (this.vertical - 1) * height,
			total = this.level * this.vertical,
			gridset = [],
			tda  = [],
			tempdiv, tempgrid, k=0;
			
		for(var i=0; i<total; i++){
			tempdiv = $('<div>');
			tempgrid = {};
			tempgrid.div = tempdiv;
			if(i % this.level == (this.level - 1)){
				tempgrid.width = spwidth;
				tempgrid.top = (Math.floor(i/this.level))*height;
				tempgrid.left = this.imgwidth - spwidth;
			}else{
				tempgrid.width = width;
				tempgrid.top = (Math.floor(i/this.level))*height;
				tempgrid.left = (i%this.level) * width;
			}
			if(i > total - this.level - 1){
				tempgrid.height = spheight;
				tempgrid.top = this.imgheight - spheight;
			}else{
				tempgrid.height = height;
			}
			gridset.push(tempgrid);
		}
		
		for(var i=0; i<gridset.length; i++){
			tempdiv = $(gridset[i].div);
			tempdiv.css('width', gridset[i].width)
				   .css('height', gridset[i].height)
				   .css('display', 'inline')
				   .css('float', 'left')
			this.grid.append(tempdiv);
		}
		
		for(var i=0; i<this.vertical; i++){
			tda[i] = [];
			for(var j=0; j<this.level; j++){
				tda[i].push(gridset[k++]);
			}
		}
		this.lattice = gridset;
		this.tda = tda;
	},
	
	_addbgimg: function(array, imgurl){
		var img = 'url("' + imgurl + '")';
		for(var i=0; i<array.length; i++){
			$(array[i].div).css('backgroundImage', img);
			$(array[i].div).css('backgroundPosition', '-' + array[i].left + 'px -' + array[i].top + 'px');
			$(array[i].div).css('opacity', 0);
			$(array[i].div).css('zIndex', 999);
		}
	},
	
	_overHandler: function(){
		if(this.isAuto){
			window.clearInterval(this.autoHandler);
			this.autoHandler = null;
		}
	},
	
	_outHandler: function(){
		if(this.isAuto){
			this._autoRun();
		}
	},
	
	_autoRun: function(){
		var delay = this.delay,
			that = this,
			next, index;
		this.autoHandler = window.setInterval(function(){
			next = that.current + 1;
			index = next < that.length ? next : 0;
			that._move(index);
		}, delay);
	},
	
	_move: function(index){
		var nav = this.imgThumb[index],
			img = this.imgQueue[index],
			url = $('img', img).attr('src'),
			cur = this.current,
			onav = this.imgThumb[cur],
			oimg = this.imgQueue[cur];
		this._changeSrc(onav, false);
		this._changeSrc(nav, true);
		this.lock = false;
		this._addbgimg(this.lattice, url);
		this._effect(this.current, index);
		this.current = index;
	},
	
	_changeSrc: function(elem, flag){
		var src = $(elem).attr('src'),
			name = this._getFileName(src),
			replace, newsrc;

		if(flag){
			replace = name + '_on';
			newsrc = src.replace(name, replace);
			$(elem).attr('src', newsrc);
		}else{
			replace = name.substring(0, name.length-3);
			newsrc = src.replace(name, replace);
			$(elem).attr('src', newsrc);
		}
	},
	
	_getFileName: function(path){
		var file = path.substring(path.lastIndexOf('/')+1),
			name = file.substring(0, file.lastIndexOf('.'));
		return name;
	},
		
	_effect: function(index, fresh){
		var tempgrids = [],
			l = this.level * this.vertical,
			time = this.duration,
			timeslice = Math.floor(this.duration / l),
			random = parseInt(4*Math.random()),
			hclass = this.hideclass || 'cHide',
			that = this, g;
		
		
		random < 4 ? random = random : random = 3;
		switch(random){
			case 0:
				tempgrids = this._ring(this.tda, this.level, this.vertical);
				break;
			case 1:
				tempgrids = this._snake(this.tda, this.level, this.vertical);
				break;
			case 2:
				tempgrids = this._random(this.tda, this.level, this.vertical);
				break;
			case 3:
				tempgrids = this._bars(this.tda, this.level, this.vertical);
				break;
			default:
				tempgrids = this._bars(this.tda, this.level, this.vertical);
		}
		for(var i=0; i<tempgrids.length-1; i++){
			(function(){
				var g = tempgrids[i],
					time = timeslice * (i + 1);
				window.setTimeout(function(){
					$(g.div).animate({
						opacity:1
					});
				}, time);
			})();
		}
		
		g = tempgrids[l-1];
		window.setTimeout(function(){
			$(g.div).animate({
				opacity:1
			}, function(){
				that.lock = true;
				$(that.imgQueue[fresh]).removeClass(hclass);
				$(that.imgQueue[index]).addClass(hclass);
			});
		}, time);
	},
	
	_ring: function(tda, column, line){
		var xmax = column - 1,
			ymax = line - 1,
			xmin = 0,
			ymin = 0,
			alln = line * column,
			arry = [],
			q = 0,
			i,j;
		
		while(q < alln){
			i = xmin;
			j = ymin;
			
			while(i <= xmax && q < alln)
				 arry[q++] = tda[j][i++];
			i = xmax;
			j = ++ymin;
			
			while(j <= ymax && q < alln)
				 arry[q++] = tda[j++][i];
			i = --xmax;
			j = ymax;
			
			while(i >= xmin && q < alln)
				 arry[q++] = tda[j][i--];
			i = xmin;
			j = --ymax;
			
			while(j >= ymin && q < alln)
				 arry[q++] = tda[j--][i];
			
			++xmin;
		}
		return arry;
	},
	
	_snake: function(tda, column, line){
		var xmax    = column - 1,
			ymax    = line - 1,
			not     = xmax + ymax,
			counter = 0,
			minxy   = Math.min(xmax,ymax),
			q 		= 0,
			i       = 0,
			j       = 0,
			arry    = [];
			
		while(counter <= not){
			if(counter % 2 == 0){
				if(i >= xmax){
					i = xmax;
					j = 0;
				}
			}else{
				if(j >= ymax){
					i = counter - minxy < 0 ? 0 : counter - minxy;
					j = ymax;
				}
			}
			while((i + j) <= counter){
				j = counter - i;
				arry[q++] = tda[j][i];
				if(counter % 2 == 0){
					if(--i < 0 ){
						i = 0;
					}
					if(++j > ymax){
						j = ymax;
						break;
					}
				}else{
					if(++i > xmax){
						i = xmax;
						break;
					}
					if(--j < 0){
						j = 0;
					}
				}
			}
			counter++;
		}
		return arry;
	},
	
	_random: function(tda, column, line){
		var arry = [],
			q    = 0,
			i    = 0,
			j    = 0;
			
		for(; i<tda.length; i++){
			for(j=0; j<tda[i].length; j++){
				arry[q++] = tda[i][j];
			}
		}
		arry.sort(function(){
			return Math.random() > 0.5 ? -1 : 1;
		});
		return arry;
	},
	
	_bars: function(tda, column, line){
		var arry = [],
			q    = 0,
			i    = 0,
			j    = 0;
		
		while(i < column){
			j = 0;
			while(j < line){
				arry[q++] = tda[j][i];
				j++;
			}
			i++;
		}
		return arry;
	}
});
})(jQuery);